<script setup lang="ts">
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons-vue";
import { useMenuStore } from "../../store/menuStore";
const menuStore = useMenuStore();
const toggleCollapsed = () => {
  menuStore.collapsed = !menuStore.collapsed;
  menuStore.openKeys = !menuStore.collapsed ? menuStore.preOpenKeys : [];
};
</script>

<template>
  <div class="flex items-center border-b-[1px] w-full dark:bg-darkBg dark:border-gray-600">
    <div class="flex items-center p-2">
      <a-button class="flex items-center max-sm:hidden" type="primary" @click="toggleCollapsed">
        <MenuUnfoldOutlined v-if="menuStore.collapsed" />
        <MenuFoldOutlined v-else />
      </a-button>
      <Breadcrumb />
    </div>
    <FuncBar class="max-sm:hidden" />
  </div>
  <FuncBar class="sm:hidden" />
  <DynamicTags />
</template>

<style scoped></style>
